<template>
  <div class="l-content__trWrp" :style="{'padding-left':tree.isLoad?'200px':'0px'}">
    <div v-if="tree.isLoad" class="as-tree">
      <h2 class="as-tree__hd">
        BBS云服务器
      </h2>
      <el-tree
        :data="tree.data"
        :props="tree.defaultProps"
        :highlight-current="true"
        :indent="10"
        @node-click="treeNodeClick">
      </el-tree>
    </div>
    <div class="content">
      <div class="content-header">
        <span class="content-header__cap">实例</span>
        <span class="content-header__captip">（已创建0个CDS磁盘，共可建0个）</span>
        <div class="content-header__rgt">
          <span class="text-primary">7天即将到期</span>
        </div>
      </div>
      <div class="content-srh clearfix">
        <el-button size="small" type="primary" icon="el-icon-plus">创建实例</el-button>
        <el-button :disabled="hasSlcItem" size="small" type="primary" plain>续费</el-button>
        <el-button :disabled="hasSlcItem" size="small" type="primary" plain>编辑标签</el-button>
        <el-dropdown size="small" type="primary" trigger="click">
          <span class="el-dropdown-link">
            更多操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              :disabled="hasSlcItem"
              v-for="item in controllerOptions"
              @click.native="controllerClick(item.value)"
              :key="item.value"
              >
              {{item.label}}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <div class="fr">
          <div class="el-input-with-select-wrap">
            <el-input @keyup.enter.native="search" size="small" placeholder="输入关键字搜索" v-model="dataForm.searchKey" class="input-with-select">
              <el-select style="width: 90px;" v-model="dataForm.searchType" slot="prepend" placeholder="请选择">
                <el-option label="选项1" :value="1"></el-option>
                <el-option label="选项2" :value="2"></el-option>
                <el-option label="选项3" :value="3"></el-option>
              </el-select>
              <el-button @click="search" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <el-button @click="refresh" class="el-button--sm-bigicn" plain type="primary" size="small" icon="el-icon-refresh"></el-button>
          <el-button @click="download" class="el-button--sm-bigicn" plain type="primary" size="small" icon="el-icon-download"></el-button>
          <el-button @click="setting" class="el-button--sm-bigicn" plain type="primary" size="small" icon="el-icon-setting"></el-button>
        </div>
      </div>
      <div class="content-main">
        <el-table
          class="table--main"
          :data="result.list"
          @sort-change = "listSort"
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="50">
          </el-table-column>
          <el-table-column
            prop="id"
            label="实例名称/ID"
            sortable="true"
            :sort-by="['id','tag']">
          </el-table-column>
          <el-table-column
            prop="status"
            label="状态"
            :render-header="statusLabel"
          >
          </el-table-column>
          <el-table-column
            prop="tag"
            label="标签"
            sortable="custom">
          </el-table-column>
          <el-table-column
            prop="way"
            label="支付方式">
          </el-table-column>
          <el-table-column
            prop="time"
            label="到期时间">
          </el-table-column>
          <el-table-column
            prop="settingType"
            label="类型"
            filter-placement="bottom"
            :filter-multiple="true"
            :filters="[{text: '类型1', value: '类型1'}, {text: '类型2', value: '类型2'}, {text: '类型3', value: '类型3'}]"
            >
          </el-table-column>
          <el-table-column
            prop="publicIp"
            label="内网IP">
          </el-table-column>
          <el-table-column
            prop="networkIp"
            label="公网IP/带宽">
          </el-table-column>
          <template slot="empty">
            <div class="nodata"><p class="nodata__p">没有相关数据</p></div>
          </template>
        </el-table>
      </div>
      <div class="content-pageno clearfix">
        <el-pagination
          class="fr"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
          :current-page="dataForm.currentPage"
          :page-sizes="[10, 50, 100, 200]"
          :page-size="dataForm.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import api from "@/api";
export default {
  data() {
    return {
      tree: {
        isLoad: false,
        data: [],
        defaultProps: {
          children: "children",
          label: "label"
        }
      },
      select: "",
      input5: "what",
      controllerType: "start",
      controllerOptions: [
        {
          value: "start",
          label: "开启"
        },
        {
          value: "restart",
          label: "重启"
        }
      ],
      statusArr: [
        {
          value: "running",
          label: "运行中"
        },
        {
          value: "stoping",
          label: "已关机"
        },
        {
          value: "ending",
          label: "已过期"
        }
      ],
      dataForm: {
        pageSize: 10,
        currentPage: 0,
        searchType: 1,
        searchKey: "",
        status: "running",
        settingType: "type1",
        sortByTag: null
      },
      selectionList: [],
      result: {
        total: 0,
        list: []
      }
    };
  },
  created() {
    this.getListData();
    this.getTreeData();
  },
  computed: {
    hasSlcItem: function() {
      return this.selectionList.length == 0 ? true : false;
    }
  },
  methods: {
    getTreeData() {
      api.demo.getTreeData().then(({ data }) => {
        if (data && data.code === 0) {
          this.tree.data = data.result;
          this.tree.isLoad = true;
        }
      });
    },
    treeNodeClick(data) {
      // 点击左侧的树形菜单项
      console.log(data);
      if (!data.children) {
        console.log(data.chkVal);
        this.getListData();
      }
    },
    listSort(args) {
      console.log(args);
      // 表格排序，是标签则远程排序
      if (!args.prop) {
        this.sortByTag = null;
        this.getListData();
      }
      if (args.prop == "tag") {
        console.log(args.order);
        this.sortByTag = args.order;
        this.getListData();
      }
    },
    getByStaus(val) {
      this.dataForm.status = val;
      this.getListData();
    },
    statusLabel(h, { column }) {
      // 自定义el-table表头
      let label = column.label;
      return h("el-dropdown", { size: "mini", trigger: "click" }, [
        h("span", { class: "el-dropdown-link" }, [
          label + "",
          h("i", { class: "el-icon-arrow-down el-icon--right" })
        ]),
        h(
          "el-dropdown-menu",
          { slot: "dropdown" },
          this.statusArr.map(item => {
            return h(
              "el-dropdown-item",
              {
                nativeOn: {
                  click: () => {
                    this.getByStaus(item.value);
                  }
                }
              },
              item.label
            );
          })
        )
      ]);
    },
    getListData() {
      api.demo.getDemo1Data(this.dataForm).then(({ data }) => {
        if (data && data.code === 0) {
          this.result.total = data.result.total;
          this.result.list = data.result.list;
        }
      });
    },
    refresh() {
      // 刷新页面
      console.log("刷新！");
      this.getListData();
    },
    download() {
      // 下载
      console.log("下载！");
    },
    setting() {
      // 设置
      console.log("设置！");
    },
    search() {
      // 搜索
      console.log("搜索");
      console.log(this.dataForm);
      // this.getListData();
    },
    controllerClick(val) {
      console.log(this.controllerType);
      switch (val) {
        case "start":
          this.handleSelectionStart();
          break;
        case "restart":
          this.handleSelectionReStart();
          break;
        default:
          break;
      }
    },
    handleSelectionStart() {
      console.log("多项启动！");
    },
    handleSelectionReStart() {
      console.log("多项重启！");
    },
    handleSelectionChange(val) {
      console.log(val);
      this.selectionList = val;
    },
    filterStatus(value, row, column) {
      console.log(value, row, column);
      this.dataForm.status = value;
      this.getListData();
      return false;
    },
    filterType(value) {
      console.log(value);
      this.dataForm.settingType = value;
      this.getListData();
      return false;
    },
    handlePageSizeChange(val) {
      this.dataForm.pageSize = val;
      this.getListData();
    },
    handleCurrentPageChange(val) {
      this.dataForm.currentPage = val;
      this.getListData();
    }
  }
};
</script>
